<template>
  <Designer v-bind="params" v-model:current-step-key="params.currentStepKey" :stepChange="handleStepChange" ref="designerRef">
    <template #base>
      <BaseFormConfig
        class="diy-base-form-config bg-white"
        ref="formBaseInfoRef"
        @value-change="handleValueChange"
        :data="{
          record: data.initBaseInfo,
          dataSource: data.dataSource,
        }"
      />
    </template>

    <template #formField>
      <FormFieldList class="diy-form-field" ref="formFieldListRef" @value-change="handleFormFieldChange" :form-field="data.formFieldList" />
    </template>
  </Designer>
</template>
<script lang="ts" setup>
  import { ref, nextTick, computed } from "vue"
  import Designer from "/@/views/diyDesigner/Designer.vue"
  import { getDiyForm, saveOrUpdateDiyForm, listFormField } from "/@/api/infra/diyForm"
  import BaseFormConfig from "./Form.vue"
  import FormFieldList from "./FormFieldList.vue"
  import { listAllDataSource } from "/@/views/addon/onlineDev/datasource/api"
  import { useRouter } from "vue-router"
  import { cloneDeep } from "lodash"
  import { useMessage } from "/@/hooks/web/useMessage"
  import qs from "qs";
  const router = useRouter()
  const { createMessage } = useMessage()
  let id = router.currentRoute.value.query?.id as string

  const data = ref<any>({
    initBaseInfo: {},
    baseInfo: {},
    dataSource: [],
    formFieldList: [],
  })
  const formBaseInfoRef = ref()
  const formFieldListRef = ref()
  const designerRef = ref<any>()
  const params = ref<any>({
    publishApi: undefined,
    queryApi: undefined,
    currentStepKey: null,
    isJumpNewPage: true,
    stepStyle: { width: "300px" },
    stepItems: [
      {
        title: "基础设置",
        key: "base",
        stepClass: "diy-base-form-container",
        status: "wait",
      },
      // {
      //   title: "表单字段",
      //   key: "formField",
      //   stepClass: "bg-white",
      //   status: "wait",
      // },
      {
        title: "表单设计",
        key: "form",
        status: "process",
      },
    ],
  })

  const handleQuery = async (id) => {
    console.log("id", id)
    data.value.dataSource = await listAllDataSource()
    data.value.initBaseInfo = await getDiyForm({ id })
    data.value.baseInfo = cloneDeep(data.value.initBaseInfo)

    designerRef.value.setTitle(data.value.baseInfo.name)
    // try {
    //   data.value.formFieldList = await listFormField({ formId: id })
    // } catch (e) {
    //   createMessage.error(e.msg || '获取表单字段失败')
    // }
    const baseInfo = data.value.initBaseInfo
    return { deleted: !!baseInfo?.id, designerConfig: baseInfo?.formConfig }
  }

  const handlePublish = async (designerConfig) => {
    console.log("designerConfig", designerConfig)
    let baseFormValue = {}
    try {
      baseFormValue = await formBaseInfoRef.value.getData()
    } catch (e) {
      console.error(e)
      params.value.currentStepKey = "base"
      return false
    }
    const dataId = await saveOrUpdateDiyForm(
      {
        ...baseFormValue,
        id,
        submitType: 1,
        fieldList: data.value.formFieldList,
        formConfig: designerConfig || {},
      },
      !!id
    )
    if (!!id || id == '') {
      id = dataId
      const query = {
        ...router.currentRoute.value.query,
        id: dataId
      }
      window.history.replaceState({}, '', `?${qs.stringify(query)}`)
    }
  }

  params.value.publishApi = handlePublish
  params.value.queryApi = handleQuery

  const handleFormFieldChange = (event) => (data.value.formFieldList = event.$table.data)

  const handleStepChange = async (node) => {
    data.value.initBaseInfo = cloneDeep(data.value.baseInfo)
  }

  const handleValueChange = (values) => {
    console.log("values", values)
    // TODO 父子组件, 当父组件属性变化, 到子组件中watch监听到属性变动
    // params.value.title = values.name
    designerRef.value.setTitle(values.name)
    data.value.baseInfo = values
  }
</script>

<style lang="less">
  .diy-base-form-container {
    width: 600px;
    margin-top: 5px;
    display: flex;
    align-self: center;
  }

  .diy-base-form-config {
    width: 560px;
    border-radius: 3%;
    height: calc(100vh - 200px);
  }

  .diy-form-field {
    margin-top: -5px;
  }
</style>
